<template>
  <view>


    <view v-if="Total" class="footer_header1" style="padding-left: 2.5%;margin-top: -16%;">

      <view class="footer_order_bottom1 " style="width: 90%;">
        <view class="">
          <image style="width: 50px;height: 60px;margin-top: -12%;z-index: 9999;position: absolute;"
            src="@/static/btn_waiter_sel.png" mode="">
          </image>
          <view class="" style="margin-left:38px;margin-top:-30px;">
            <span class="circle">{{Total}}</span>
          </view>
        </view>

        <view class="price1" style="width: 50px;">
          <span style=" color: white;margin-left: -60px;">￥{{checkedGoodsAmount}}</span>
        </view>
        <view class="footer_order_btn1" style="">
          <button @click="gocart" class="footer_orde_btn_sumbit1">去结算</button>
        </view>
      </view>

    </view>



    <view v-else class="footer_header" style="margin-left:2.5%;">
      <view class="footer_order_bottom ">
        <view class="">
          <image style="width: 50px;height: 60px;margin-top: -10%;z-index: 9999;position: absolute;"
            src="../../static/btn_waiter_nor.png" mode="">
          </image>
        </view>

        <view class="price" style="padding-left:50px;">
          <span style=" color: white;">￥ 0</span>
        </view>
        <view class="footer_order_btn" :style="'margin-left:'+left+'px'">
          <button class="footer_orde_btn_sumbit">去结算</button>
        </view>
      </view>

    </view>






  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "my-footers",
    data() {
      return {
        bottom: '',
        left: 0,
        isshow: true
      }

    },
    computed: {
      // 将 m_cart 模块中的 cart 数组映射到当前页面中使用

      ...mapGetters('m_cart', ['Total', 'checkedGoodsAmount']),
    },
    created() {
      const sysInfo = uni.getWindowInfo()
      this.bottom = sysInfo.height - 40
      this.left = sysInfo.windowWidth / 2.2


    },
    methods: {
      gocart() {
        uni.navigateTo({
          url: '/pages/order/order'
        })
      }
    }
  }
</script>

<style lang="scss">
  /* .footer_header {
   
  } */

  // 修改点击时的样式
  .button-hover {
    // color: #F85959;

    background-color: #e2e2e2;
  }

  // 最下面


  .footer_order_bottom {
    display: flex;
    justify-items: center;
    align-items: center;
    width: 90%;
    z-index: 200;
    position: absolute;
    display: flex;
    background-color: #2c2c2c;

    border-radius: 10px;
    padding-left: 20px;
    color: white;

  }

  .footer_orde_btn_sumbit {
    background-color: #2c2c2c;

    border: 1px solid #b4b4b4;


    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

  }

  .price {
    padding-left: 10px;
  }




  .footer_order_bottom1 {
    display: flex;
    justify-items: center;
    align-items: center;

    z-index: 200;
    position: absolute;
    display: flex;
    background-color: #2c2c2c;

    border-radius: 20px;
    padding-left: 20px;
    color: white;

  }

  .footer_orde_btn_sumbit1 {
    //
    border: none;
    height: 38px;
    width: 100px;
    line-height: 35px;
    border-radius: 20px;
    background-color: #facb47;
  }

  .footer_order_btn1 {
    padding-top: 2px;
    padding-left: 20%;
    height: 40px;
    width: 100px;


  }

  .price1 {
    padding-left: 20%;
  }

  // 红心圆圈
  .circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    line-height: 20px;
    /* 圆形 */
    color: white;
    text-align: center;

    /* 使数字垂直居中 */
    font-size: 14px;

  }
</style>